<template>
	<view class="outside" @click="handlerClick(id)">
		<image :src="img" mode="aspectFill"></image>
		<view class="side">
			<view class="title">{{title}}</view>
			<view class="text">{{content}}</view>
			<view class="date">发布时间：{{dateString}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			img:String,
			id: String,
			title: String,
			content: String,
			dateString: String
		},
		methods: {
			handlerClick(id) {
				this.$emit('goTo', id)
			}
		}
	}
</script>

<style>
	.outside {
		padding: 20rpx;
		width: calc(100% - 40rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.outside image {
		height: 180rpx;
		width: 180rpx;
	}

	.side {
		/* height: 200rpx; */
		width: calc(100% - 200rpx);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-around;
	}

	.title {
		/* height: 100%; */
		/* line-height: 40rpx; */
		line-height: 50rpx;
		max-height: 100rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 30rpx;
		color: #333;
	}

	.text {
		line-height: 30rpx;
		height: 0rpx;
		overflow: hidden;
		color: #666;
		text-overflow: ellipsis;
		font-size: 24rpx;
		margin-bottom: 30rpx;
	}
	
	.date {
		line-height:30rpx ;
		/* width: 180rpx; */
		/* text-align: right; */
		font-size: 24rpx;
		color: #999;
	}
</style>
